<template>
  <div class="edit_class">
    <header-go-back @back="handleGoBack" center>
      <template v-slot:title>
        <div class="header_type">
          <div 
              :class="{'header_select_type': selectedType === 'pay', 'header_type_item': true}" 
              @click="handleSelectedType('pay')">支出
          </div>|
          <div 
              :class="{'header_select_type': selectedType === 'income', 'header_type_item': true}" 
              @click="handleSelectedType('income')">收入
          </div>
        </div>
      </template>
      <template v-slot:text>
        <div class="header_add"><i class="iconfont icon-jia" @click="handleGoNewClass" v-if="selectedType === 'pay'"></i></div>
      </template>
    </header-go-back>
    <div class="edit_content">
      <class-collapse v-for="(item, index) in data" :key="'class' + index" :data="item"></class-collapse>
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, ref } from 'vue'
import { useStore } from 'vuex';
import ClassCollapse from '@/components/class/ClassCollapse.vue'
import HeaderGoBack from '@/components/common/HeaderGoBack.vue';
import { useRouter } from 'vue-router';
export default defineComponent({
    components: { 
      ClassCollapse, 
      HeaderGoBack
    },
    setup() {
        const store = useStore()
        const router = useRouter()
        const selectedType = ref("pay");
        const bigClassVisible = ref(false)
        const data = ref([]);
        const payData = computed(() => store.state.payClassList)
        const incomeData = computed(() => store.state.incomeClassList)
        data.value = payData.value;
        const handleSelectedType = (type: string) => {
          selectedType.value = type;
          switch (type) {
            case "pay":
              data.value = payData.value;
              break;
            case "income":
              data.value = incomeData.value;
              break;
            default:
              break;
          }
        };
        const handleGoBack = () => {
            router.push('/personal')
        };
        const handleGoReturn = () => {
          bigClassVisible.value = false
        }
        const handleGoNewClass = () => {
          router.push({
            path: '/newClass',
            query: {
              sub: '',
              type: selectedType.value
            }
          })
        }
        return {
            selectedType,
            payData,
            data,
            bigClassVisible,
            handleSelectedType,
            handleGoBack,
            handleGoReturn,
            handleGoNewClass
        };
    },
})
</script>

<style scoped>
  .edit_class {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #fff;
    width: 100%;
    height: 100vh;
    z-index: 10;
  }
  .edit_header {
    display: flex;
    justify-content: space-between;
    padding: 20px 28px;
    align-items: flex-end;
  }
  .header_go_back {
    font-size: 20px;
  }
  .header_type {
    display: flex;
    align-items: center;
    color: rgb(133, 133, 133);
  }
  .header_type_item {
    padding: 0 18px;
    width: 50px;
  }
  .header_select_type {
    font-size: 20px;
    color: #eb7775;
    position: relative;
  }
  .header_select_type::before {
    content: "";
    position: absolute;
    width: 38px;
    height: 24px;
    border-radius: 50%;
    background-image: linear-gradient(67deg, #F9C3C2, #fff);
    top: 32%;
    left: 22%;
    z-index: -1;
  }
  .header_add {
    font-size: 20px;
    color: #F9C3C2;
    width: 20px;
  }
  .edit_content {
    height: calc(100% - 66px);
    overflow-y: auto;
  }
</style>